<template>
    <div class="wrapper">
				
            <!-- header部分 -->
             <header>
                <p>编辑</p>
                <BackButton />
            </header>

        
                    <!-- 编辑表单部分 -->
            <div class="user-edit-form">
                <label for="userName">昵称：</label>
                <input type="text" v-model="userName" placeholder="输入昵称" />
                <label for="userImg">头像：</label>
                <input type="file" @change="onFileChange" accept="image/*" />
                <button @click="submitEdit">提交修改</button>
            </div>
    </div>
</template>
  
<script>
    import BackButton from '../components/BackButton.vue';
  
    export default {
        name: 'ChangeInfo',
        data() {    
            return {
				userId: this.$route.query.userId,
				userImg:'',
				userName:'',
				
            };
        },
        methods: {
            getImg(path){
				return 'http://47.92.162.176:8080'+path;
			},
			onFileChange(event) {
				// 当用户选择文件时，将文件存储到 selectedFile 中
				this.selectedFile = event.target.files[0];
				this.uploadImage(); // 调用上传函数
			},
			uploadImage() {
				let formData = new FormData();
				formData.append('file', this.selectedFile); // 将选中的文件附加到表单数据中

				// 使用 axios 上传图片到服务器
				this.$axios.post('FileController/user/img', formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				})
				.then(response => {
					if (response.data.code === '200') {
						this.userImg = response.data.result; // 从服务器获取图片的访问路径
					} else {
						alert('图片上传失败');
					}
				})
				.catch(error => {
					console.error('图片上传错误：', error);
				});
			},
			submitEdit() {
				// 提交修改后的商品信息
				this.$axios.post('UserController/user/updateInfo', this.$qs.stringify({
					userId: this.userId,
					userName: this.userName,
					userImg: this.userImg,
				}))
				.then(response => {
					if (response.data.code === '200') {
						alert('个人信息更新成功');
						this.$router.go(-1);
					} else {
						alert('更新失败');
					}
				})
				.catch(error => {
					console.error('提交错误：', error);
				});
			}
        },
        components: {
            BackButton
        },
        created() {
            this.$axios.post('UserController/user/info',this.$qs.stringify({
				userId : this.userId
			})).then(response=>{
				if(response.data.code=='200'){
					let re=response.data.result;
					this.userName=re.userName;
					this.userImg=re.userImg;
				}
			}).catch(error=>{
				console.error(error);
			});
        }
    };
</script>
  
<style scoped>
    .wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}

	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	/****************** 编辑表单部分 ******************/
	.user-edit-form {
		margin: 15vw 5vw;
		display: flex;
		flex-direction: column;
	}

	.user-edit-form label {
		font-size: 4vw;
		margin-bottom: 2vw;
	}

	.user-edit-form input,
	.user-edit-form textarea {
		width: 100%;
		padding: 3vw;
		font-size: 4vw;
		margin-bottom: 5vw;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.user-edit-form button {
		padding: 3vw;
		background-color: #0097ff;
		color: white;
		border: none;
		font-size: 4vw;
		border-radius: 10px;
		cursor: pointer;
	}
</style>
